<template>
  <div class="app-container">
    <el-row>
      <el-col :span="24">
        <el-steps :active="step" finish-status="success">
          <el-step title="基本信息"></el-step>
          <el-step title="规格参数"></el-step>
          <el-step title="销售属性"></el-step>
          <el-step title="SKU信息"></el-step>
          <el-step title="保存完成"></el-step>
        </el-steps>
      </el-col>
      <el-col :span="24" v-show="step == 0">
        <step0 ref="refStep0" @submitData="submitStep0"></step0>
      </el-col>
      <el-col :span="24" v-show="step == 1">
        <step1
          ref="refStep1"
          @submitData="submitStep1"
          @backStep="preStep"
        ></step1>
      </el-col>
      <el-col :span="24" v-show="step == 2">
        <step2
          ref="refStep2"
          @submitData="submitStep2"
          @backStep="preStep"
        ></step2>
      </el-col>
      <el-col :span="24" v-show="step == 3">
        <step3
          ref="refStep3"
          @backStep="preStep"
          @submitData="submitStep3"
        ></step3>
      </el-col>
      <el-col :span="24" v-show="step == 4">
        <el-card class="box-card" style="width: 80%; margin: 20px auto">
          <h1>保存成功</h1>
          <el-button type="primary" @click="addAgian">继续添加</el-button>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Step0 from "./step0.vue";
import Step1 from "./step1.vue";
import Step2 from "./step2.vue";
import Step3 from "./step3.vue";
import SpuApi from "@/api/product/spu";

export default {
  components: { Step0, Step1, Step2, Step3 },
  data() {
    return {
      step: 0,
      spu: {
        spuName: "",
        spuDescription: "",
        catelogId: null,
        brandId: null,
        //基本属性
        baseAttrs: [],
        //所有sku信息
        skus: [],
        //商品图集，最后sku也可以新增
        images: [],
      },
    };
  },
  methods: {
    preStep(value) {
      this.step = value;
    },
    //step0基本属性提交完成
    submitStep0(value) {
      this.step = 1;
      Object.assign(this.spu, value);
      this.$refs.refStep1.init(this.spu.catelogId);
    },
    //step1规格属性设置数组提交完成
    submitStep1(value) {
      this.step = 2;
      Object.assign(this.spu.baseAttrs, value);
      this.$refs.refStep2.init(this.spu.catelogId);
    },
    //step2销售属性提交,生成skus
    submitStep2(value) {
      this.step = 3;
      Object.assign(this.spu.skus, value);
      //先初始化几个images，后面的上传还要加
      let imgs = [];
      this.spu.images.forEach((img, idx) => {
        imgs.push({ imgUrl: "", defaultImg: 0 });
      });

      let name = this.spu.spuName;
      let title = this.spu.spuName;
      this.spu.skus.forEach((sku) => {
        sku.skuName = name + sku.skuName;
        sku.skuTitle = title + sku.skuTitle;
        sku.skuImages = imgs;
      });
      this.$refs.refStep3.init(this.spu);
    },
    //保存数据
    submitStep3(value) {
      console.log(value);
      this.$confirm("将要提交商品数据，需要一小段时间，是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          SpuApi.createSpu(this.spu).then(({ data }) => {
            if (data.code == 200) {
              this.$message({
                type: "success",
                message: "新增商品成功!",
              });
              this.step = 4;
            } else {
              this.$message({
                type: "error",
                message: "保存失败，原因【" + data.msg + "】",
              });
            }
          });
        })
        .catch((e) => {});
    },
    addAgian() {
      this.step = 0;
      this.spu = {};
    },
  },
};
</script>
<style scoped></style>
